<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>多图标平滑移动 - 轨迹回放</title>
    <style type="text/css">
      body,
      html {
        width: 100%;
        height: 100%;
        margin: 0;
        font-family: "微软雅黑";
      }
      #map_canvas {
        width: 100%;
        height: 500px;
      }
      #result {
        width: 100%;
      }
    </style>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=RKVMcKG7V23ABjbKnvOGyjY5GGaj0eLL"></script>
  </head>
  <body>
    <div id="map_canvas"></div>
    <div id="result"></div>
    <button onclick="nextOne()">下一个</button>
    <script>
      var pointArr = [
        {
          123: { lng: "116.379341", lat: "39.938776" },
          124: { lng: "116.402625", lat: "39.943091" },
          125: { lng: "116.373807", lat: "39.953103" },
          126: { lng: "116.40011", lat: "39.958357" },
          127: { lng: "116.408518", lat: "39.958025" },
          128: { lng: "116.364537", lat: "39.943755" },
        },
        {
          123: { lng: "116.379628", lat: "39.935125" },
          124: { lng: "116.403487", lat: "39.94027" },
          125: { lng: "116.38509", lat: "39.955315" },
          126: { lng: "116.392924", lat: "39.958357" },
          127: { lng: "116.392924", lat: "39.957804" },
          128: { lng: "116.368993", lat: "39.944032" },
        },
        {
          123: { lng: "116.379341", lat: "39.938776" },
          124: { lng: "116.402625", lat: "39.943091" },
          125: { lng: "116.373807", lat: "39.953103" },
          126: { lng: "116.40011", lat: "39.958357" },
          127: { lng: "116.408518", lat: "39.958025" },
          128: { lng: "116.364537", lat: "39.943755" },
        },
      ];
      var nowPoint = {};
      var nowMarker = {};

      var map = new BMap.Map("map_canvas");
      var point = new BMap.Point(116.379341, 39.938776);
      map.centerAndZoom(point, 15);
      // 初始化
      for (var n in pointArr[0]) {
        var myIcon = new BMap.Icon(
          "http://developer.baidu.com/map/jsdemo/img/car.png",
          new BMap.Size(52, 26)
        );
        nowPoint[n] = new BMap.Point(pointArr[0][n].lng, pointArr[0][n].lat);
        nowMarker[n] = new BMap.Marker(nowPoint[n], { icon: myIcon });
        map.addOverlay(nowMarker[n]);
      }
      // 下一个
      function nextOne() {
        for (var n in pointArr[1]) {
          var point = new BMap.Point(pointArr[1][n].lng, pointArr[1][n].lat);
          console.log(nowPoint[n]);
          if (!pointArr[1][n]) {
            return;
          }
          // nowPoint[n].setPosition(new BMap.Point(pointArr[1][n].lng,pointArr[1][n].lat));
          _move(nowPoint[n], point, nowMarker[n]);
          nowPoint[n] = point;
        }
      }
      function _move(initPos, targetPos, nowMarker) {
        var me = this,
          //当前的帧数
          currentCount = 0,
          //步长，米/秒
          timer = 10,
          step = 400 / (1000 / timer),
          //初始坐标
          init_pos = map.getMapType().getProjection().lngLatToPoint(initPos),
          //获取结束点的(x,y)坐标
          target_pos = map
            .getMapType()
            .getProjection()
            .lngLatToPoint(targetPos),
          //总的步长
          count = Math.round(_getDistance(init_pos, target_pos) / step);
        console.log(count);
        //如果小于1直接移动到下一点
        // if (count < 1) {
        //     me._moveNext(++me.i);
        //     return;
        // }
        //两点之间匀速移动
        me._intervalFlag = setInterval(function () {
          //两点之间当前帧数大于总帧数的时候，则说明已经完成移动
          if (currentCount >= count) {
            clearInterval(me._intervalFlag);
            return;
            //移动的点已经超过总的长度
            // if(me.i > me._path.length){
            //     return;
            // }
            //运行下一个点
            // me._moveNext(++me.i);
          } else {
            currentCount++;
            var x = tweenLinear(init_pos.x, target_pos.x, currentCount, count),
              y = tweenLinear(init_pos.y, target_pos.y, currentCount, count),
              pos = map
                .getMapType()
                .getProjection()
                .pointToLngLat(new BMap.Pixel(x, y));
            //设置marker
            if (currentCount == 1) {
              var proPos = null;
              // if(me.i - 1 >= 0){
              //     proPos = me._path[me.i - 1];
              // }
              setRotation(proPos, initPos, targetPos, nowMarker);
            }
            //正在移动

            nowMarker.setPosition(pos);
            //设置自定义overlay的位置
            // me._setInfoWin(pos);
          }
        }, timer);
      }

      /**
       * 计算两点间的距离
       * @param {Point} poi 经纬度坐标A点.
       * @param {Point} poi 经纬度坐标B点.
       * @return 无返回值.
       */
      function _getDistance(pxA, pxB) {
        return Math.sqrt(
          Math.pow(pxA.x - pxB.x, 2) + Math.pow(pxA.y - pxB.y, 2)
        );
      }

      /**
       *在每个点的真实步骤中设置小车转动的角度
       */
      function setRotation(prePos, curPos, targetPos, nowMarker) {
        var me = this;
        var deg = 0;
        //start!
        curPos = map.pointToPixel(curPos);
        targetPos = map.pointToPixel(targetPos);

        if (targetPos.x != curPos.x) {
          var tan = (targetPos.y - curPos.y) / (targetPos.x - curPos.x),
            atan = Math.atan(tan);
          deg = (atan * 360) / (2 * Math.PI);
          //degree  correction;
          if (targetPos.x < curPos.x) {
            deg = -deg + 90 + 90;
          } else {
            deg = -deg;
          }

          nowMarker.setRotation(-deg);
        } else {
          var disy = targetPos.y - curPos.y;
          var bias = 0;
          if (disy > 0) bias = -1;
          else bias = 1;
          nowMarker.setRotation(-bias * 90);
        }
        return;
      }

      // 缓动效果 : 初始坐标，目标坐标，当前的步长，总的步长
      function tweenLinear(initPos, targetPos, currentCount, count) {
        var b = initPos,
          c = targetPos - initPos,
          t = currentCount,
          d = count;
        return (c * t) / d + b;
      }
    </script>
  </body>
</html>
